import React, { Component } from 'react';
import { connect } from 'dva';
import { routerRedux } from 'dva/router';
import { Row, Col } from 'antd';
import styles from './Grid.css';

class Grid extends Component {
    constructor(props) {
        super(props);
        this.state = {
            left: 0,
            target: 'prev',
            mainH: 0, // 高度
        }
    }

    handleClick(elem) {
        if (this.state.target === elem) {
            return false;
        } else {
            this.setState({
                left: this.state.left === 0 ? '-100%' : 0,
                target: elem
            })
        }

    }
    componentWillMount() {
        // 父页面
        this.setState({ mainH: global.MainH });
        const _this = this;
        // 检测窗体大小变化
        window.onresize = function () {
            const MainH = document.documentElement.clientHeight - 1 || document.body.clientHeight - 1;
            _this.setState({ mainH: (MainH - 295) });
            // global.MainH = (MainH - 180);
        }
        
    }

    handleOpenDetail(title) {
        let ROUTER = '';
        switch (title) {
            case '开卡':
                ROUTER = '/cardIndex'
                break;
            case '转账业务':
                ROUTER = '/'
                break;
            case '存折补登打印':
                ROUTER = '/'
                break;
            case '个人信息查询':
                ROUTER = '/'
                break;
            case '个人客户信息修改':
                ROUTER = '/'
                break;
            case '银行卡、社保卡激活':
                ROUTER = '/'
                break;
            case '自助签约':
                ROUTER = '/'
                break;
            case '个人银行卡介质的挂失和补发':
                ROUTER = '/lossandreplace'
                break;
            case '个人网银、手机银行的开通、维护':
                ROUTER = '/'
                break;
            case '定期存款业务开户、销户、提前支取':
                ROUTER = '/'
                break;
            case '交通罚没款缴费':
                ROUTER = '/'
                break;
            case '卡片密码修改':
                ROUTER = '/'
                break;
            case '重置卡片密码':
                ROUTER = '/'
                break;
            case '对账单打印及回收':
                ROUTER = '/'
                break;
            case '回单打印':
                ROUTER = '/'
                break;
            case '对公账户管理':
                ROUTER = '/'
                break;
            case '账户余额、明细查询打印':
                ROUTER = '/'
                break;
            default:
                break;
        }
        // this.props.dispatch(routerRedux.push({
        //     pathname: '/getCard',
        //     data: ROUTER
        // }));
        this.props.dispatch(routerRedux.push('/getCard'))
        global.ROUTER = ROUTER;
    }

    render() {
        return (
            <div className={styles.normal}>
                {/* <div className={styles.prev} onClick={this.handleClick.bind(this, 'prev')}></div>
                <div className={styles.next} onClick={this.handleClick.bind(this, 'next')}></div> */}
                <div className={styles.grad}>
                    <div className={styles.gradLeft}>
                        <div className={styles.gradItem + ' ' + styles.gradItem1} onClick={this.handleOpenDetail.bind(this, '开卡')}>
                            我要办卡<span>OPEN AN ACCOUNT</span>
                        </div>
                        <div className={styles.gradItem + ' ' + styles.gradItem3}>
                            查询余额<span>CHECK THE BALANCE</span>
                        </div>
                        <div className={styles.gradItem + ' ' + styles.gradItem2}>
                            转账汇款<span>TRANSFER REMITTANCE</span>
                        </div>
                        <div className={styles.gradItem + ' ' + styles.gradItem4}>
                            理财业务<span>FINANCIAL SERVICE</span>
                        </div>
                    </div>
                    <div className={styles.gradRight}>
                        <div className={styles.gradItem}>
                            存取服务<span>DEPOSIT WITHDRAWAL</span>
                        </div>
                        <div className={styles.gradItem}>
                            便民服务<span>CIVILIAN SERVICE</span>
                        </div>
                        <div className={styles.gradItem}>
                            缴费业务<span>PAYMENT SERVICE</span>
                        </div>
                    </div>
                    {/* <div style={{ position: 'relative', width: '200%', left: this.state.left, transition: 'left ease-in-out 0.6s' }}>
                        <div className={styles.gradItems} style={{ height: this.state.mainH }}>
                            <div className={styles.center}>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_01} onClick={this.handleOpenDetail.bind(this, '开卡')} >
                                        <p className={styles.strip}>开卡</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_02} onClick={this.handleOpenDetail.bind(this, '转账业务')} >
                                        <p className={styles.strip}>转账业务</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_03} onClick={this.handleOpenDetail.bind(this, '存折补登打印')} >
                                        <p className={styles.strip}>存折补登打印</p>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_04} onClick={this.handleOpenDetail.bind(this, '个人信息查询')} >
                                        <p className={styles.strip}>个人信息查询</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_05} onClick={this.handleOpenDetail.bind(this, '个人客户信息修改')} >
                                        <p className={styles.strip}>个人客户信息修改</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_06} onClick={this.handleOpenDetail.bind(this, '银行卡、社保卡激活')} >
                                        <p className={styles.strip}>银行卡、社保卡激活</p>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_07} onClick={this.handleOpenDetail.bind(this, '自助签约')} >
                                        <p className={styles.strip}>自助签约</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_14} onClick={this.handleOpenDetail.bind(this, '个人银行卡介质的挂失和补发')} >
                                        <p className={styles.strip}>个人银行卡的挂失和补发</p>
                                    </Col>
                                    <Col span={7} style={{ width: 300 }}></Col>
                                </Row>
                            </div>
                        </div>
                        <div className={styles.gradItems} style={{ height: global.MainH }}>
                            <div className={styles.center}>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_09} onClick={this.handleOpenDetail.bind(this, '个人网银、手机银行的开通、维护')} >
                                        <p className={styles.strip}>个人网银、手机银行的开通、维护</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_10} onClick={this.handleOpenDetail.bind(this, '定期存款业务开户、销户、提前支取')} >
                                        <p className={styles.strip}>定期存款业务开户、销户、提前支取</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_11} onClick={this.handleOpenDetail.bind(this, '交通罚没款缴费')} >
                                        <p className={styles.strip}>交通罚没款缴费</p>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_12} onClick={this.handleOpenDetail.bind(this, '卡片密码修改')} >
                                        <p className={styles.strip}>卡片密码修改</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_13} onClick={this.handleOpenDetail.bind(this, '重置卡片密码')} >
                                        <p className={styles.strip}>重置卡片密码</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_14} onClick={this.handleOpenDetail.bind(this, '对账单打印及回收')} >
                                        <p className={styles.strip}>对账单打印及回收</p>
                                    </Col>
                                </Row>
                                <Row type="flex" justify="space-between" className={styles.rows}>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_15} onClick={this.handleOpenDetail.bind(this, '回单打印')} >
                                        <p className={styles.strip}>回单打印</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_16} onClick={this.handleOpenDetail.bind(this, '对公账户管理')} >
                                        <p className={styles.strip}>对公账户管理</p>
                                    </Col>
                                    <Col span={7} className={styles.cols + ' ' + styles.block_17} onClick={this.handleOpenDetail.bind(this, '账户余额、明细查询打印')} >
                                        <p className={styles.strip}>账户余额、明细查询打印</p>
                                    </Col>
                                </Row>
                            </div>
                        </div>
                    </div> */}
                </div>

            </div>
        )
    }
}

export default connect()(Grid);